<!--    必应每日一图    -->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">编程开发</a></li>
        <li class="breadcrumb-item active" aria-current="page">必应每日一图</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header">必应每日一图</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">利用Java爬取Bing每日一图</h5>
        <p class="card-text"></p>

        <button type="button" @click="getImage" class="btn btn-outline-success">获取图片</button>


        <!--          <a href="#" class="btn btn-outline-success">获取每日笑话</a>-->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

<!--    <div class="photo_03">-->
<!--      <ul>-->
<!--        <li><img :src=imageSrc alt=""></li>-->
<!--        <li><img :src=imageSrc alt=""></li>-->
<!--        <li><img :src=imageSrc alt=""></li>-->
<!--        <li><img :src=imageSrc alt=""></li>-->
<!--        &lt;!&ndash;                <li><img src="photo/CN-wp5.jpg" alt=""></li>&ndash;&gt;-->
<!--        &lt;!&ndash;                <li><img src="photo/CN-wp6.jpg" alt=""></li>&ndash;&gt;-->
<!--      </ul>-->
<!--    </div>-->

    <div class="mt-3 border-primary text-center">
      <img id="avatar-img" :src=imageSrc alt="" class="fluid">
      <img id="avatar-img2" :src=imageSrc2 alt="" class="fluid">
    </div>

  </div>
</template>

<script>
  export default {
    name: 'BingImage',
    data() {
      return {
        imageSrc: "",
        imageSrc2: ""
      }
    },
    methods: {
      async getImage() {
        this.$('.spinner-border').css('display', 'inline-block')

        const result = await this.$http.get("http://116.62.157.224:8081/bingimage");
        console.log(result);
        console.log(result.data);
        this.imageSrc = result.data;
        // this.imageSrc2 = "file://" + result.data;
        console.log("src = " + this.imageSrc);

        if (this.imageURL !== '') {
          this.$('.spinner-border').css('display', 'none')
        }
      }
    }
  }
</script>

<style scoped>
  /*  旋转按钮  */
  .spinner-border {
    display: none;
  }
</style>
